<template>
  <div class="product">
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in shopInfo.s_goods_photos" :key="item.id">
          <img :src="item.path" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 顶部返回 -->
    <div class="back">
      <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
      >
      <template #right>
        <van-icon name="cart-o" @click="toCart" size="18" />
      </template>
      </van-nav-bar>
    </div>
    <!-- 底部导航 -->
    <van-action-bar class="shopCar">
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车" @click="toShopping" />
      <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
      <van-action-bar-button type="warning" text="加入购物车" @click="joinCart" />
      <van-action-bar-button type="danger" text="立即购买" @click="nowBuy" />
    </van-action-bar>
    <!-- 商品详情 -->
    <div class="product-info">
      <!-- 价格 -->
      <div class="price">
        <h3><span>￥</span>{{ shopInfo.price }}</h3>
        <van-button round class="price-btn" size="small" v-if="shopInfo.sale_price">店铺活动券后￥<span>{{shopInfo.sale_price||489}}</span></van-button>
        <div class="text">
          <span>店铺券满50减10></span>
        </div>
      </div>
      <!-- 分期 -->
      <div class="aging">
        <van-icon name="after-sale" size="14" />
        <h3>最高享3期免息，花呗分期满100减5</h3>
      </div>
      <!-- 标题 -->
      <div class="title">
        <van-button round class="tianmao" size="mini">天猫</van-button>
        <span>{{shopInfo.name}}</span>
      </div>
      <!-- 月销 -->
      <div class="monthly-sales">
        <span>月销 {{shopInfo.sold_num}}</span>
      </div>
      <!-- 商品规格 -->
      <div class="specification">
        <!-- 地址 -->
        <van-cell  icon="logistics" class="express">
          <h1>上海</h1><span>快递：免运费</span>
          <p>配送至：广东省 广州市 天河区</p>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="arrow-icon" />
          </template>
        </van-cell>
        <!-- 保障 -->
        <van-cell icon="like-o" class="safeguard">
          <van-text-ellipsis :content="text" class="text" />
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="arrow-icon" />
          </template>
        </van-cell>
        <!-- 鞋码 -->
        <van-cell icon="apps-o" class="shoe-size">
          <h3>请选择: 鞋码</h3>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="arrow-icon" />
          </template>
        </van-cell>
        <!-- 产品参数 -->
        <van-cell icon="completed" class="shoe-size parameter">
          <h3>品牌-品名-闭合方式-鞋码-流行元素</h3>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="arrow-icon" />
          </template>
        </van-cell>
      </div>
    </div>
    <!-- 轻提示 -->
    <van-toast v-model:show="show" style="padding: 0">
      <template #message>
        <h3>加入购物车成功！</h3>
      </template>
    </van-toast>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import useCartStore from '@/stores/cart';
const cartStore=useCartStore()
const router=useRouter()
// 顶部返回
const onClickLeft = () => history.back();
const text ='假一赔四 - 极速退款 - 7天无理由退换 - 上门取退';
const shopInfo=JSON.parse(localStorage.getItem('good'))
// 轻提示
const show=ref(false)
// 加入购物车
const joinCart=()=>{
  cartStore.addCart({goods_id:shopInfo.id,num:1})
  show.value=true
}
// 去购物车
const toCart=()=>{
  router.push('/ShoppingCart')
}
const toShopping=()=>{
  router.push('/ShoppingCart')
}
// 立即购买
const nowBuy=()=>{
  let cartList=JSON.parse(localStorage.getItem('cartList'))
  cartStore.addCart({goods_id:shopInfo.id,num:1})
  cartList.forEach(ele=>{
    let data=ref([])
    if(ele.s_good.id===shopInfo.id){
      ele.isChecked=true
      data.value.push(ele)
      router.push({path:'/Order',query:{data:JSON.stringify(data.value)}})
    }
  })
}
</script>

<style lang='scss'>
.product{
  position: relative;
  width: 100vw;
  .swiper{
    .my-swipe{
      width: 100vw;
      height: 100vw;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .back{
    position: absolute;
    top: 0;
    width: 100vw;
    height: 12.2667vw;
    .van-nav-bar{
      background-color: transparent;
      .van-icon-arrow-left:before,
      .van-icon-cart-o:before{
        color: #fff;
        font-size: 5.3333vw;
      }
    }
  }
  .shopCar{
    z-index: 999;
  }
  .product-info{
    position: absolute;
    top: 98vw;
    height: 106.6667vw;
    width: 100vw;
    border-radius: 5.3333vw 5.3333vw 0 0;
    background-color: #fff;
    .price{
      margin: 2.6667vw auto 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 94.6667vw;
      height: 10.6667vw;
      h3{
        display: inline-block;
        color: #ee7245;
        font-size: 4.8vw;
        line-height: 10.6667vw;
        span{
          display: inline-block;
          font-size: 3.2vw;
        }
      }
      .price-btn{
        margin-left: -8.6667vw;
        width: 38vw;
        height: 8.5333vw;
        color: #ee7245;
        background-color: #fbeee6;
        border: none;
        line-height: 10.6667vw;
        .van-button__text{
          font-size: 3.2vw;
        }
        span{
          display: inline-block;
          font-size: 4.8vw;
        }
      }
      .text{
        span{
          width: 25.0667vw;
          height: 3.2vw;
          display: inline-block;
          font-size: 3.2vw;
          color: #ee7245;
        }
      }
    }
    .aging{
      margin: 1.3333vw auto 0;
      width: 94.6667vw;
      height: 4.2667vw;
      color: #ee7245;
      background-color: #fbeee6;
      border-radius: 2.6667vw 2.6667vw;
      .van-icon{
        margin-left: 1vw;
        vertical-align: text-bottom;
      }
      h3{
        margin-left: 1.3333vw;
        display: inline-block;
        font-size: 3.2vw;
        line-height: 4.2667vw;
      }
    }
    .title{
      margin: 2.3333vw auto;
      width: 94.6667vw;
      .tianmao{
        height: 4.2667vw;
        width: 13.3333vw;
        background-color: red;
        color: #fff;
        vertical-align: text-bottom;
      }
      span{
        font-weight: bold;
      }
    }
    .monthly-sales{
      margin: 0 auto;
      width: 94.6667vw;
      height: 4.2667vw;
      span{
        display: inline-block;
        font-size: 3.2vw;
        color: #b1b1b1;
      }
    }
    .specification{
      margin: 2.6667vw auto 0;
      padding-top: 1.6667vw;
      width: 96vw;
      height: 55vw;
      background-color: #f8f8f8;
      border-radius: 4vw;
      .van-cell{
        border-bottom: .2667vw solid #f7f7f7;
      }
      .express{ 
        position: relative;
        height: 17.3333vw;
        background-color: #f8f8f8;
        h1{
          position: absolute;
          left: 3vw;
          color: #000;
          font-weight: bold;
        }
        span{
          position: absolute;
          display: inline-block;
          left: 13vw;
          top: 0;
          color: #000;
        }
        p{
          position: absolute;
          left: 3vw;
          top: 5.5vw;
          font-size: 3.2vw;
        }
        .arrow-icon {
          font-size: 16px;
          line-height: 11.3333vw;
        }
      }
      .safeguard{
        background-color: #f8f8f8;
        .text{
          color: #000;
        }
        .arrow-icon {
          font-size: 16px;
          line-height:6.3333vw;
        }
      }
      .shoe-size{
        position: relative;
        background-color: #f8f8f8;
        h3{
          position: absolute;
          left: 3vw;
          color: #000;
        }
        .arrow-icon {
          font-size: 16px;
          line-height:6.3333vw;
        }
      }
    }
  }
  .van-toast{
    h3{
      margin: 2.6667vw;
    }
  }
}
</style>
